<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <title>图书列表</title>
	  <!-- Bootstrap -->
	  <link href="${pageContext.request.contextPath}/dist/css/bootstrap.css" rel="stylesheet">
	  <style type="text/css">
	  	#login{
			height: 40px;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	  </style>
	</head>
	
	
	
	<body>
    <br>
	${email }
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-6"></div>
				<div class="col-lg-6">
					<div class="row">
						<div class="col-lg-6"></div>
						<div class="col-lg-6">
							<div class="row">
								<div class="col-lg-6"></div>
								<div class="col-lg-6" style="height: 40px;">
									<div class="dropdown" style="float: right;">
									  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									    ${email }
									   <span class="caret"></span>
									  </button>
									  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="min-width: 50px;">
									    <li><a href="${pageContext.request.contextPath }/LogoutServlet">注销</a></li>
									  </ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container" style="margin-top: 10px;">
			<h1 class="text-center">图书列表</h1>
		</div>
		<div class="container">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>图书ID</th>
						<th>图书名称</th>
						<th>图书作者</th>
						<th>图书分类</th>
						<th>图书价格</th>
						<th colspan="2" class="text-center">操作</th>
					</tr>   
				</thead>
				<tbody id="tbody">
				
<%-- 				<c:forEach items="${requestScope.page.object}" var="book">
					<tr>
						<td>${book.bookId }</td>
						<td>${book.bookName }</td>
						<td>${book.authorName }</td>  	
						<td>${book.category.categoryName }</td>
						<td>${book.price }</td>
						<td class="text-center">
							<a onclick="if(confirm('确定要删除吗?')){return true;}else{return false;}" class="btn btn-primary" href="${pageContext.request.contextPath}/BookDelectServlet?bookId=${book.bookId }">删除</a>
						</td>
						<td class="text-center">
							<a class="btn btn-primary" href="${pageContext.request.contextPath}/BookUpdateJumpServlet?bookId=${book.bookId }">更新</a>
						</td>
					</tr>
				</c:forEach> --%>
					
				</tbody>
			</table>
		</div>
		<div class="container">
			<a href="${pageContext.request.contextPath}/BookAddJumpServlet">添加图书</a>/
			/<a href="${pageContext.request.contextPath}/ExcelBookDownLoadServlet" >导出Excel</a>
		</div>
		<div class="container">
			<nav aria-label="Page navigation" class="text-right">
			  <ul class="pagination">
<!-- 		    <li>
			      <a href="#" aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			      </a>
			    </li>
			    <li><a href="#">1</a></li>
			    <li class="active"><a href="#">2</a></li>
			    <li><a href="#">3</a></li>
			    <li><a href="#">4</a></li>
			    <li><a href="#">5</a></li>
			    <li>
			      <a href="#" aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			      </a>
			    </li> -->
			  </ul>
			</nav>
		</div>
		
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="${pageContext.request.contextPath}/dist/js/bootstrap.js"></script>
		
		<script type="text/javascript">
/*         分页查询   需要  4个参数
 	   1. 需要知道当前的在第几页  pageNO   后台获取
 	   2.需要知道总的页数 是多少  pageSize  每页显示多少条数   
 	   3. 前端显示的页数的个数     自定义页数          pageCount  总记录数  /   自定义页数
 	   4.知道数据库中一共有多少条信息        总记录数          SQL语句查询    */

   var pageNO = 1;
   var pageSize= 2;
   var pageCount = null;
   
	 $.getJSON("${pageContext.request.contextPath }/BookgetListJsonServlet",{pageNO:pageNO,pageSize:pageSize},function(d){
		 console.log(d);
		 
		 pageCount=d.pageCount;
		 
		 
		 var str="";    /* object  是一个 List  集合     */
	     for(var i=0;i<d.object.length;i++){
	    	 str +="<tr>\r\n" + 
				"						<td>"+d.object[i].bookId+"</td>\r\n" + 
				"						<td>"+d.object[i].bookName+"</td>\r\n" + 
				"						<td>"+d.object[i].authorName+"</td>\r\n" + 
				"						<td>"+d.object[i].category.categoryName+"</td>\r\n" + 
				"						<td>"+d.object[i].price+"</td>\r\n" + 
				"						<td class=\"text-center\">\r\n" + 
				"							<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookDelectServlet?bookId="+d.object[i].bookId+"\">删除</a>\r\n" + 
				"						</td>\r\n" + 
				"						<td class=\"text-center\">\r\n" + 
				"							<a class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookUpdateJumpServlet?bookId="+d.object[i].bookId+"\">更新</a>\r\n" + 
				"						</td>\r\n" + 
				"					</tr>";
	    	 
	    	 
	    	 
	     }
	     console.log(str);
		 
		 
		 
		 $("#tbody").html(str);
		 
		 
		 joinPage(pageNO,pageCount);
		 
		 /* currentPage 是一个类选择器   */
		 currentPage(pageNO,".currentPage");
		 
		 bindPage(pageNO,pageSize);
	 });  
	
	 
	 function bindPage(pageNO,pageSize){
		 
		 
		 
		 // 绑定中间页
		 
		 var cps=$(".currentPage");
		
		 for(var i=0;i<cps.length;i++){
			 $(cps[i]).click(function(){
				 pageNO=parseInt(this.innerHTML);
				 
				 
				 
				 
				 
				 $.getJSON("${pageContext.request.contextPath }/BookgetListJsonServlet",{pageNO:pageNO,pageSize:pageSize},function(d){
					 console.log(d);
					 
					 pageCount=d.pageCount;
					 
					 
					 var str="";
				     for(var i=0;i<d.object.length;i++){
				    	 str +="<tr>\r\n" + 
							"						<td>"+d.object[i].bookId+"</td>\r\n" + 
							"						<td>"+d.object[i].bookName+"</td>\r\n" + 
							"						<td>"+d.object[i].authorName+"</td>\r\n" + 
							"						<td>"+d.object[i].category.categoryName+"</td>\r\n" + 
							"						<td>"+d.object[i].price+"</td>\r\n" + 
							"						<td class=\"text-center\">\r\n" + 
							"							<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookDelectServlet?bookId="+d.object[i].bookId+"\">删除</a>\r\n" + 
							"						</td>\r\n" + 
							"						<td class=\"text-center\">\r\n" + 
							"							<a class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookUpdateJumpServlet?bookId="+d.object[i].bookId+"\">更新</a>\r\n" + 
							"						</td>\r\n" + 
							"					</tr>";
				    	 
				    	 
				    	 
				     }
				     console.log(str);
					 
					 
					 
					 $("#tbody").html(str);
					 
					 
					 joinPage(pageNO,pageCount);
					 
					 /* currentPage 是一个类选择器   */
					 currentPage(pageNO,".currentPage");
					 
					 bindPage(pageNO,pageSize);
				 }); 
				 
				 
			 });
			 
			 
		 }
		 
		 
		 
		 
		 
		//  绑定上一页	 
		$("#pre").click(function(){
			
			if(pageNO<=1){
				
				alert("已经是最后一页了");
				
			}else{
				pageNO=pageNO-1;
				
				
				
				 $.getJSON("${pageContext.request.contextPath }/BookgetListJsonServlet",{pageNO:pageNO,pageSize:pageSize},function(d){
					 console.log(d);
					 
					 pageCount=d.pageCount;
					 
					 
					 var str="";
				     for(var i=0;i<d.object.length;i++){
				    	 str +="<tr>\r\n" + 
							"						<td>"+d.object[i].bookId+"</td>\r\n" + 
							"						<td>"+d.object[i].bookName+"</td>\r\n" + 
							"						<td>"+d.object[i].authorName+"</td>\r\n" + 
							"						<td>"+d.object[i].category.categoryName+"</td>\r\n" + 
							"						<td>"+d.object[i].price+"</td>\r\n" + 
							"						<td class=\"text-center\">\r\n" + 
							"							<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookDelectServlet?bookId="+d.object[i].bookId+"\">删除</a>\r\n" + 
							"						</td>\r\n" + 
							"						<td class=\"text-center\">\r\n" + 
							"							<a class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookUpdateJumpServlet?bookId="+d.object[i].bookId+"\">更新</a>\r\n" + 
							"						</td>\r\n" + 
							"					</tr>";
				    	 
				    	 
				    	 
				     }
				     console.log(str);
					 
					 
					 
					 $("#tbody").html(str);
					 
					 
					 joinPage(pageNO,pageCount);
					 
					 /* currentPage 是一个类选择器   */
					 currentPage(pageNO,".currentPage");
					 
					 bindPage(pageNO,pageSize);
				 });  
				
				
				
			}
	
		});	 
		 
		 
	 
	 //  绑定下一页
	 $("#next").click(function(){
		 
		 if(pageNO>=pageCount){
			 
			 alert("已经是最后一页了");
			 
		 }else{
			 
			 pageNO=pageNO+1;
			 
			 $.getJSON("${pageContext.request.contextPath }/BookgetListJsonServlet",{pageNO:pageNO,pageSize:pageSize},function(d){
				 console.log(d);
				 
				 pageCount=d.pageCount;
				 
				 
				 var str="";
			     for(var i=0;i<d.object.length;i++){
			    	 str +="<tr>\r\n" + 
						"						<td>"+d.object[i].bookId+"</td>\r\n" + 
						"						<td>"+d.object[i].bookName+"</td>\r\n" + 
						"						<td>"+d.object[i].authorName+"</td>\r\n" + 
						"						<td>"+d.object[i].category.categoryName+"</td>\r\n" + 
						"						<td>"+d.object[i].price+"</td>\r\n" + 
						"						<td class=\"text-center\">\r\n" + 
						"							<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookDelectServlet?bookId="+d.object[i].bookId+"\">删除</a>\r\n" + 
						"						</td>\r\n" + 
						"						<td class=\"text-center\">\r\n" + 
						"							<a class=\"btn btn-primary\" href=\"${pageContext.request.contextPath}/BookUpdateJumpServlet?bookId="+d.object[i].bookId+"\">更新</a>\r\n" + 
						"						</td>\r\n" + 
						"					</tr>";
			    	 
			    	 
			    	 
			     }
			     console.log(str);
				 
				 
				 
				 $("#tbody").html(str);
				 
				 
				 joinPage(pageNO,pageCount);
				 
				 /* currentPage 是一个类选择器   */
				 currentPage(pageNO,".currentPage");
				 
				 bindPage(pageNO,pageSize);
			 });  
			 
			 
			 
			 
		 }
 
	 });
		 
	 
}
 
	 
	 // 当前页的颜色
	 function currentPage(pageNO,currentPage){
		 
		 /*  ".currentPage"   1.不加双引号  是因为 拿到的是 参数   ，加了字符串拿到的就是字符串   2. 参数中的个数 赋值给     c   通过循环   将每个值拿到  但是 存储的是字符串  所以  将字符串转化成  int  */
		 var c=$(currentPage);
		 for(var i=0;i<c.length;i++){
			 var cp=c[i].innerHTML;              /* innerHTML  拿到当前页码 */
			 if(pageNO==cp){                              /* 如果当前页  比较 如果是当前页  就添加样式         */
				// c[i].style.cssText="color:red";
				 $(c[i]).parent().addClass("active");    /*JQ  转    */  
			 }		 
		 }
		  
	 }
	 
	 
	 
	 // 中间也的显示
	 function joinPage(pageNO,pageCount){
		 
		 var str="<li> <a id='pre' href=\"#\">&laquo</a></li>";
		 
		 if(pageCount<=3){
			 for(var i=1;i<=pageCount;i++){
				 str += "<li> <a class='currentPage' href=\"#\">"+i+"</a></li>";
			 }
			 
		 }else{
			 
			 if((pageNO<=3)){
				 for(var i=1;i<=3;i++){
					 str += "<li> <a class='currentPage' href=\"#\">"+i+"</a></li>";
				 }
				 
			 }else{
				 for(var i=pageNO-2;i<=pageNO;i++){
					 str += "<li> <a class='currentPage' href=\"#\">"+i+"</a></li>";
				 }
			 }
		 }
		 
		//输出下一页的图标
		str +="<li ><a id='next' href=\"#\">&raquo</a></li>";
		 
		 
		 
		 $(".pagination").html(str);
	 }
		 	   
 	   
 	   
 	   
		
		
		
		
		</script>
		
		
	</body>
</html>
